Creating a Custom Mouse Tool

A custom mouse tool can be used in the Viewer, first by defining the tool and then by updating the UI to have a button for the tool.

Step 1: Define the tool in JavaScript code.

It doesn’t matter where in code the tool is defined as long as it is defined before the tool is selected:

Example	Copy Code
// Create the new mouse tool. var myTool = PCCViewer.MouseTools.createMouseTool( "PinkLine", PCCViewer.MouseTool.Type.LineAnnotation); // Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick myTool.getTemplateMark() .setColor("#FF69B4") .setThickness(10);

Example

Copy Code

// Create the new mouse tool.
var myTool = PCCViewer.MouseTools.createMouseTool(
                 "PinkLine",
                 PCCViewer.MouseTool.Type.LineAnnotation);

// Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick
myTool.getTemplateMark()
    .setColor("#FF69B4")
    .setThickness(10);

Step 2: Update the UI to show a button for the tool.

This modification will take place in the viewerTemplate.html file. The button can be added to several places in the UI, but a common place to add the button is in the annotate tab pane. Content of the annotate tab is defined in the element with attribute data-pcc-nav-tab="annotate":

Example	Copy Code
<!-- The following markup will create a button that enables use of the mouse tool named "PinkLine". The custom attributes that are used: * data-pcc-mouse-tool="PinkLine" - specifies that the button selects the mouse tool named "MyLineTool" * data-pcc-context-menu="false" - specifies that a context menu is not shown for this mouse tool --> <button data-pcc-mouse-tool="PinkLine" data-pcc-context-menu="false" class="pcc-icon pcc-icon-annotate-line" title="Pink Line Tool"></button>

Example

Copy Code

<!-- The following markup will create a button that enables use
     of the mouse tool named "PinkLine".

     The custom attributes that are used:
      * data-pcc-mouse-tool="PinkLine" - specifies that the button selects the mouse tool named "MyLineTool"
      * data-pcc-context-menu="false" - specifies that a context menu is not shown for this mouse tool
     -->
<button
    data-pcc-mouse-tool="PinkLine"
    data-pcc-context-menu="false"
    class="pcc-icon pcc-icon-annotate-line"
    title="Pink Line Tool"></button>